import './SetUserInfo.scss'

import { Tooltip } from "antd"
import { useState } from 'react'
import { useEventEmitter, useMount } from 'ahooks'

import { modelStore } from '../../Config/zustand'
import { UserAvatar, UserBackboard } from '../../Config/theme'
import { GetIndexedDB, PutIndexedDB } from '../../Utils/IndexedDB'

import { LockOutlined, KeyOutlined, FormOutlined, IdcardOutlined, RetweetOutlined } from '@ant-design/icons';

const SetUserInfo = () => {
    const { updateModel } = modelStore()
    const [UserAdd, setUserAdd] = useState()
    const [UserInfo, setUserInfo] = useState()
    const getUserData = async () => {
        const user = await GetIndexedDB('user')
        const userAdd = await GetIndexedDB('userAdd')
        setUserAdd(userAdd)
        setUserInfo(user)
    }

    const UserData = [
        { title: '账户信息', value: 'tableName' },
        { title: '账户名称', value: 'userName' },
        { title: '所属机构', value: 'organizationName' },
        { title: '联系电话', value: 'mobile' },
        { title: '有效期限', value: 'validPeriod' },
    ]

    const UserOptions = [
        { label: '修改用户', value: 'changeUserInfo', icon: <IdcardOutlined /> },
        { label: '修改密码', value: 'changePassword', icon: <KeyOutlined /> },
        { label: '重置密码', value: 'resetPassword', icon: <RetweetOutlined /> },
        { label: '锁屏动画', value: 'lockAnimation', icon: <LockOutlined /> },
    ]

    const DataEvent = useEventEmitter()
    DataEvent.useSubscription(val => {
        const { type } = val
        if (type === 'onUpdate') getUserData()
    })

    const onOptionsClick = (type) => {
        const Mapping = {
            changeUserInfo: { title: '修改用户自定义信息', width: 800 },
            changePassword: { title: '修改密码', width: 640 },
            resetPassword: { title: '重置密码', width: 640 },
            lockAnimation: { title: '锁屏动画', width: 1200 }
        }

        updateModel({ title: Mapping[type].title, type: 'CommonModel', width: Mapping[type].width, data: { type, UserAdd, UserInfo, DataEvent } })
    }

    useMount(() => { getUserData() })
    return (
        <div className='SetUserInfo'>
            <div className='UserInfo'>
                <img src={UserBackboard[UserAdd?.backImage]} alt="" />
                <div>
                    <svg fill="none" viewBox="0 0 144 62" xmlns="http://www.w3.org/2000/svg">
                        <path fill="#dee2e5" d="m111.34 23.88c-10.62-10.46-18.5-23.88-38.74-23.88h-1.2c-20.24 0-28.12 13.42-38.74 23.88-7.72 9.64-19.44 11.74-32.66 12.12v26h144v-26c-13.22-.38-24.94-2.48-32.66-12.12z" fillRule="evenodd" />
                    </svg>
                    <img src={UserAvatar[UserAdd?.avatar]} alt="" />
                    <div className='userName'>{UserAdd?.nickName}</div>
                    {UserInfo &&
                        <div className='userInfo'>
                            {UserData.map((item, index) =>
                                <div key={index}>
                                    <div>{item.title} : </div>
                                    <div>{UserInfo[item.value]}</div>
                                </div>
                            )}
                        </div>
                    }
                    <div className='Options'>
                        {UserOptions.map(item =>
                            <div key={item.value} onClick={() => onOptionsClick(item.value)} >
                                <Tooltip title={item.label}>
                                    {item.icon}
                                </Tooltip>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default SetUserInfo;